<template>
  <div>
    <el-dialog class="app-container" title="新增产品入库" width="40%" :visible.sync="visible" top="5vh" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="物品名称" prop="productName">
        <el-input disabled="true" style="width: 200px;" v-model="form.productName" placeholder="请输入物品名称" >
          <el-button slot="append" icon="el-icon-search" @click="handleProduct"></el-button>
        </el-input>
        </el-form-item>
        <el-form-item label="物品类型" prop="productType">
          <el-select  disabled="true" style="width: 200px;" v-model="form.productType" placeholder="请选择仓库名称">
            <el-option
              v-for="item in productTypeList"
              :key="item.id"
              :value="item.dictLabel">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input  disabled="true" style="width: 200px;" v-model="form.price" placeholder="请输入价格" />
        </el-form-item>
        <el-form-item label="数量" prop="number">
          <el-input-number v-model="form.number" @change="handleChange" :min="1"  label="描述文字"></el-input-number>
        </el-form-item>
<!--                <el-form-item label="仓库名称" prop="warehouseName">-->
<!--                  <el-select style="width: 200px;"  @change="changeWarehouse"  v-model="form.warehouseName" placeholder="请选择仓库名称">-->
<!--                    <el-option-->
<!--                      v-for="item in warehouseList"-->
<!--                      :key="item.id"-->
<!--                      :label="item.warehouseName"-->
<!--                      :value="`${item.warehouseName},${item.id}`">-->
<!--                    </el-option>-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

    </el-dialog>
    <importSelectProduct ref="importSelectProduct" @showArticle="showArticle"></importSelectProduct>

  </div>
</template>

<script>
import {getDicts} from "@/api/system/dict/data";
import {listWarehouse} from "@/api/module/warehouse";
import importSelectProduct from '@/views/module/outbound/selectProduct'

export default {
  name: "addProduct",
  components:{
    importSelectProduct
  },
  data(){
    return{
      visible:false,
      form:{
        productName:'',
      },
      rules:{
        productName:[
          { required: true, message: '请选择物品名称', trigger: 'blur' },
        ],
        // productType:[
        //   { required: true, message: '请选择物品类型', trigger: 'blur，change' },
        // ],
        // price:[
        //   { required: true, message: '请输入单价', trigger: 'blur' },
        // ],
        number:[
          { required: true, message: '请输入数量', trigger: 'blur' },
        ],

      },
      productTypeList:[],//物品类型
      warehouseList:[],//仓库列表
    }
  },
  created() {
    this.getProductType()
    this.WarehouseList()
  },
  methods:{
    show(){
      this.visible=true
    },
    /** 选择物品*/
    handleProduct(){
      this.$refs.importSelectProduct.show()
    },
    showArticle(val){
      console.log(val)
      this.form.productType=val.productType
      this.form.productId=val.id
      this.form.productName=val.productName
      this.form.price=val.price

      console.log(this.form)
    },
    /** 选择仓库 */
    changeWarehouse(value){
      // console.log(value)
      // 截取前面的字符串
      var  tr = value.match(/(\S*),/)[1];
      // console.log(tr)
      // 截取后面的字符串
      var  str = value.match(/,(\S*)/)[1];
      // console.log(str)
      this.form.warehouseId=str
      this.form.warehouseName=tr

    },
    /** 查询仓库管理列表 */
    WarehouseList() {
      this.loading = true;
      listWarehouse(this.queryParams).then(response => {
        console.log(response)
        this.warehouseList = response.rows;
      });
    },
    /** 查询产品类型 */
    getProductType(){
      getDicts('item_type').then(response=>{
        this.productTypeList=response.data
      })
    },
    submitForm(){
      this.$refs["form"].validate(valid => {
        console.log(valid)
        if(valid){
          this.$emit('showAddProduct',this.form)
          this.visible=false
          this.reset()
        }
      })
      // console.log(this.form)

    },
    reset(){
      this.form={
        productType:null,
        productName:null,
        price:null,
        number:null,
        warehouseName:null,
        warehouseId:null
      }
    },
    cancel(){
      this.reset()
      this.visible=false
    },
    handleChange(value){
      console.log(value)
      this.form.number=value
    }
  }
}
</script>

<style scoped>

</style>
